<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <title>分页</title>
</head>
<body>
    <nav>
        <!-- .pagination创建分页组件 -->
        <!-- .justify-content-center让分页组件在父容器居中对齐 -->
        <!-- .pagination-lg大型分页组件 -->
        <ul class="pagination justify-content-center pagination-lg">
            <!-- .page-item用于创建可以点击的分页项 -->
            <!-- .page-link样式化分页按钮 -->
            <!-- .disabled禁用分页按钮 -->
            <li class="page-item disabled"> <a href="#" class="page-link">上一页</a></li>
            <!-- .active激活分页按钮 -->
            <li class="page-item active"> <a href="#" class="page-link">1</a></li>
            <li class="page-item"> <a href="#" class="page-link">2</a></li>
            <li class="page-item"> <a href="#" class="page-link">3</a></li>
            <li class="page-item"> <a href="#" class="page-link">下一页</a></li>

        </ul>
    </nav>
    <script>
        $(document).ready(function(){
            // 当分页按钮被点击
            $(".page-item").click(function(){
                // 移除所有按钮的激活
                $(".page-item").removeClass("active");
                // 让当前被点击的按钮激活
                $(this).addClass("active");
            })
        })
    </script>
</body>
</html>